<template>
    <el-card shadow='never' style='max-height: 70vh; overflow: auto'>
        <el-form ref='form' :model='form' :rules='rules' label-width='90px' :disabled='disabled'>
            <el-form-item label='id:' prop='id' v-show='false'>
                <el-input v-model='form.id' disabled />
            </el-form-item>
            <el-form-item label='租户ID:' prop='tenant_id'>
                <!--请将show_field，query_field =后面的id换成要展示和检索的字段，如 name或者title  ----->
                <SelectPage v-model='form.tenant_id' :url="'/admin/px.tenant/selectPage'" show_field='name'
                            query_field='id' :multiple='false' />
            </el-form-item>

            <el-form-item label='账户名称:' prop='name'>
                <el-input v-model='form.name' />
            </el-form-item>

            <el-form-item label='银行账号:' prop='bank_account'>
                <el-input v-model='form.bank_account' />
            </el-form-item>

            <el-form-item label='开户行:' prop='bank'>
                <el-input v-model='form.bank' />
            </el-form-item>
            <el-form-item label='状态:' prop='status'>
                <el-select v-model='form.status' placeholder='请选择状态' clearable>
                    <el-option v-for='(item, index) in status' :key='index' :label='item.label'
                               :value='item.value' />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type='primary' @click='submitForm'>确认</el-button>
                <el-button type='warning' @click='cancel'>取消</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script>
import { regionData } from 'element-china-area-data'

export default {
    name: 'EditForm',
    props: {
        findFormData: {
            type: Object,
            default: {},
        },
        editFormParams: {
            type: Object,
            default: {},
        },
        // 表单是否禁用
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            // 编辑表单验证规则
            rules: {
                tenant_id: [{ required: true, message: '请输入租户ID', trigger: 'blur' }],
            },
            form: {},
            // 区域选择配置
            areaOptions: regionData,
            status: [
                { label: '禁用', value: 0 },
                { label: '正常', value: 1 },
                { label: '审核中', value: 3 },
                { label: '已拒绝', value: 4 },
                { label: '已通过', value: 5 },
            ],

        }
    },
    watch: {
        findFormData: {
            handler(nval) {
                if (JSON.stringify(nval) != '{}') {
                    this.$nextTick(() => {
                        this.form = nval
                    })
                }
            },
            immediate: true,
            deep: false,

        },
    },
    methods: {
        // 取消按钮
        cancel() {
            this.$emit('editFormCancel')
        },

        submitForm() {
            this.$refs['form'].validate((valid, obj) => {
                if (valid) {
                    this.$emit('submitForm', this.form)
                }
            })
        },

        // 表单重置
        reset() {
            this.resetForm('form')
        },
    },
}
</script>
